<!-- 购物车 -->
<template>
	<div class="page_wrap">
		<header>
			<div class="h_left">
				<i class="iconfont iconarrowLeft-fill" @click="$router.go(-1)"></i>
			</div>
			<div class="h_center"><span>购物车</span></div>
			<div class="h_right">
				<!--<i class="iconfont icongengduo"></i>-->
				<i class="iconfont iconradio-fill" @click="editFN()" v-if="isEdit"></i>
				<i class="iconfont iconedit2" @click="editFN()" v-else></i>
			</div>
		</header>

		<div class="list_box">
			<ul>
				<li v-for="(x, indexX) in dataList">
					<div class="ra">
						<div class="check_icon" @click="checkStore(x, indexX)">
							<img src="../../assets/images/btn_select_selected@2x.png" v-if="x.is_check" />
							<img src="../../assets/images/btn_select_default@2x.png" v-else/>
						</div>
						<p class="store_name">
							<img src="../../assets/images/icon_store_normal.png" />
							<span>{{x.storeName}}</span>
						</p>
					</div>
					<div class="rb" v-for="(y,indexY) in x.goodsList">
						<div class="goods_box">
							<div class="g_left">
								<div class="check_icon" @click="checkGoods(x, indexX, y, indexY)">
									<img src="../../assets/images/btn_select_selected@2x.png" v-if="y.is_check" />
									<img src="../../assets/images/btn_select_default@2x.png" v-else/>
								</div>
								<div class="pic">
									<img :src="y.imageSrc+'@200w_200h'" alt="" />
								</div>
							</div>
							<div class="g_right">
								<div class="goods_name">
									<span>{{y.goodsName}}</span>
								</div>
								<div class="goods_price">￥{{y.goods_price}}</div>
							</div>
						</div>
						<div class="goods_specification">
							<span>{{y.goodsFullSpecs}}</span>
							<div class="goods_num_edit">
								<img src="../../assets/images/btn_reduce@3x.png" alt="" @click="reduceNum(y,indexY)" />
								<input v-model="y.buyNum" type="tel" maxlength="5" @change="inputChange" />
								<img src="../../assets/images/btn_add@3x.png" alt="" @click="addNum(y,indexY)" />
							</div>
						</div>
					</div>
					<div class="rc"></div>
				</li>
			</ul>
		</div>

		<!--底部按钮-->
		<footer>
			<div class="f_content">
				<div class="f_left">
					<div class="icon">
						<div class="check_icon" @click="checkAll()">
							<img src="../../assets/images/btn_select_selected@2x.png" v-if="all_check" />
							<img src="../../assets/images/btn_select_default@2x.png" v-else/>
						</div>
					</div>
					<div class="txt">
						<p>总价:￥{{total_price}}</p>
					</div>
				</div>
				<div class="f_right">
					<template v-if="isEdit">
						<div class="btn btn_gray" @click="delCart()"><i class="iconfont icondelete"></i></div>
					</template>
					<template v-else>
						<div class="btn" v-if="goods_select_num" @click="submitOrder"><span>去结算</span></div>
						<div class="btn btn_gray" v-else><span>去结算</span></div>
					</template>
				</div>
			</div>
		</footer>
	</div>
</template>

<script>
	import response from '@/testData/cart/list'; //模拟的数据
	import { isPositiveNum } from '@/assets/js/verify/verify';
	import { Toast, Dialog, } from 'vant';
	import { getPositionY, smoothScrollTop, topWindScrollY, } from "@/assets/js/utils/utils.js";

	export default {
		data() {
			return {
				dataList: [],
				all_check: false,
				total_price: 0,
				goods_select_num: 0, //商品打勾的数量
				isEdit: false,
			};
		},
		watch: {},
		computed: {},
		components: {},
		beforeRouteEnter(to, from, next) {
			next();
			//smoothScrollTop();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {},
		mounted() {
			this.getCarList();
		},
		methods: {
			getCarList() {
				let list = response.datas.cartStoreVoList;
				let storeList = [];
				list.forEach((x, indexX) => {
					x.goodsList = [];
					for(let y of x.cartSpuVoList) {
						for(let z of y.cartItemVoList) {
							z.goods_price = z.goodsPrice0;
							z.is_check = true;
						}
						x.goodsList.push(...y.cartItemVoList)
					}
					let obj = {
						storeId: x.storeId,
						storeName: x.storeName,
						goodsList: x.goodsList,
						store_price: 0,
						is_check: true,
					}
					storeList.push(obj);
				});
				this.dataList = storeList;

				this.all_check = true;

				this.calculatePrice();
			}, //全选
			checkAll() {
				this.all_check = this.all_check ? false : true;
				for(let x of this.dataList) {
					x.is_check = this.all_check;
					for(let y of x.goodsList) {
						y.is_check = this.all_check;
					}
				}
				this.calculatePrice();
			},
			//勾选店铺
			checkStore(x, indexX, y, indexY) {
				x.is_check = x.is_check ? false : true;
				for(let g of x.goodsList) {
					g.is_check = x.is_check;
				}
				let arr = this.dataList.filter(item => item.is_check);
				if(arr.length == this.dataList.length) {
					this.all_check = true;
				} else {
					this.all_check = false;
				}
				this.calculatePrice();
			},
			//勾选商品
			checkGoods(x, indexX, y, indexY) {
				y.is_check = y.is_check ? false : true;
				let n = 0,
					m = 0;
				for(let item of x.goodsList) {
					n++;
					if(item.is_check) m++;
				}
				if(n == m) {
					x.is_check = true;
				} else {
					x.is_check = false;
				}
				let arr = this.dataList.filter(item => item.is_check);
				if(arr.length == this.dataList.length) {
					this.all_check = true;
				} else {
					this.all_check = false;
				}
				this.calculatePrice();
			},
			reduceNum(item) {
				if(item.buyNum > 1) {
					item.buyNum--;
				} else {
					item.buyNum = 1;
				}

				this.calculatePrice();
			},
			addNum(item) {
				if(item.buyNum < 200) {
					item.buyNum++;
				}
				this.calculatePrice();
			},
			inputChange() {
				for(let x of this.dataList) {
					for(let y of x.goodsList) {
						if(!isPositiveNum(y.buyNum)) y.buyNum = 1;
					}
				}
				this.calculatePrice();
			},
			//计算价格
			calculatePrice() {
				this.goods_select_num = 0;
				let sum = 0;
				for(let x of this.dataList) {
					for(let y of x.goodsList) {
						if(y.is_check) {
							sum += (y.goods_price * y.buyNum);
							this.goods_select_num++;
						}
					}
				}
				this.total_price = sum;
			},
			//编辑购物车
			editFN() {
				this.isEdit = this.isEdit ? false : true;
				//this.checkAll();
			},
			//删除
			delCart() {
				let num = 0;
				for(let x of this.dataList) {
					for(let y of x.goodsList) {
						if(y.is_check) num++;
					}
				}
				if(num == 0) return Toast('请选择商品');

				Dialog.confirm({
					title: '',
					message: '确定删除商品',
					cancelButtonText: 'NO',
					confirmButtonText: 'Yes',
					closeOnClickOverlay: true,
				}).then(() => {
					fn(this);
				}).catch(() => {});

				function fn(_this) {
					for(let x of _this.dataList) {
						x.goodsList = x.goodsList.filter(item => !item.is_check);
					}
					_this.dataList = _this.dataList.filter(item => item.goodsList.length);
				}
			},
			//提交订单
			submitOrder() {
				Toast.loading({
					duration: 600,
					message: "loading...",
					forbidClick: true,
				});

				let orderMsg = {
					totalPrice: this.total_price,
					storeList: [],
				};

				for(let x of this.dataList) {
					let obj = {
						storeId: x.storeId,
						storeName: x.storeName,
						goodsList: [],
					}
					for(let y of x.goodsList) {
						if(y.is_check) {
							obj.goodsList.push(y);
						}
					}
					if(obj.goodsList.length) orderMsg.storeList.push(obj);
				}

				sessionStorage.setItem('verifyOrderMsg', JSON.stringify(orderMsg)); //用sessionStorage保存订单信息

				setTimeout(() => {
					this.$router.push({
						name: 'orderVerify',
					})
				}, 500);
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.page_wrap {
		width: 100%;
		height: 100%;
		padding: rem(90) 0 0 0;
	}
	
	//list_box
	.list_box {
		padding: 0 0 rem(200) 0;
		ul {}
		li {
			background: #fff;
			margin: 0 0 rem(20) 0;
			.check_icon {
				width: rem(36);
				height: rem(36);
				margin: 0 rem(10) 0 0;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 100%;
				}
			}
		}
		.ra {
			height: rem(100);
			padding: rem(10) rem(20);
			box-sizing: border-box;
			border-bottom: rem(1) solid #eee;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.store_name {
				display: flex;
				align-items: center;
				img {
					width: rem(32);
				}
				span {
					margin: 0 0 0 rem(10);
					font-size: rem(28);
					color: $fc;
					font-weight: bold;
				}
			}
		}
		.rb {
			border-bottom: rem(1) solid #eee;
			padding: rem(20);
			position: relative;
			.goods_box {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				.g_left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.pic {
						width: rem(140);
						height: rem(140);
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #eee;
						img {
							width: 100%;
						}
					}
				}
				.g_right {
					flex: 1;
					margin: 0 0 0 rem(10);
					.goods_name {
						span {
							font-size: rem(28);
							line-height: rem(46);
							height: rem(92);
							color: $fc;
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							word-break: break-all; //强制换行
						}
					}
					.goods_price {
						font-size: rem(32);
						color: $theme-red;
						font-weight: bold;
					}
				}
			}
			.goods_specification {
				margin: rem(10) 0 0 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				span {
					font-size: rem(24);
					color: #999;
				}
				.goods_num_edit {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					img {
						width: rem(40);
						height: rem(40);
					}
					input {
						width: rem(80);
						height: rem(50);
						line-height: rem(50);
						padding: 0 rem(15);
						text-align: center;
						margin: 0 rem(15);
						font-size: rem(26);
						color: $tc;
						border-radius: rem(10);
						box-sizing: border-box;
						border: rem(2) solid #eee;
					}
				}
			}
		}
	}
	
	//footer
	footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: rem(90);
		z-index: 1;
		/*box-shadow: 0 rem(-1) rem(1) #ccc;*/
		.f_content {
			width: 100%;
			height: rem(90);
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.f_left {
			height: 100%;
			padding: 0 0 0 rem(20);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.check_icon {
				width: rem(36);
				height: rem(36);
				margin: 0 rem(10) 0 0;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 100%;
				}
				span {}
			}
			.txt {
				p {
					font-size: rem(30);
					color: $theme-red;
					font-weight: bold;
				}
			}
		}
		.f_right {
			width: rem(320);
			height: 100%;
			.btn {
				width: 100%;
				height: 100%;
				background: $theme-color;
				display: flex;
				justify-content: center;
				align-items: center;
				span {
					font-size: rem(28);
					color: #fff;
				}
			}
			.btn_gray {
				background: #ccc;
				i {
					font-size: rem(46);
					color: #fff;
				}
			}
		}
	}
</style>